﻿@{
    ViewBag.Title = "Raphaeljs MVC Samples";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script type="text/javascript">

    $(document).ready(function() {
        $("div.easyui-accordion div a.navLink").click(function () {
            var link = $(this);
            addTab(link.text(), link.attr("navlink"));
        });
    });


    function addTab(title, url) {
        if ($('#tt').tabs('exists', title)) {
            $('#tt').tabs('select', title);
            //$('#mainPanel').setTitle(title);
        } else {
            var content = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
            var tab = $('#tt').tabs('add', {
                title: title,
                content: content,
                closable: true
            });
            //tab.data("TabNavTitle", title);
         
        }
    }
</script>
<div data-options="region:'west',split:true" title="Raphaeljs Samples" style="width: 180px; padding: 1px; overflow: hidden;">
    <div class="easyui-accordion" data-options="fit:true,border:false">
        <div title="Basic Function" iconcls="icon-edit" data-options="selected:true" style="padding: 10px; overflow: auto;">
            <p><a class="navLink" href="#" navlink="/Samples/PaperSample1">Paper</a></p>

            <p><a class="navLink" href="#" navlink="/Samples/PaperSample2">Base Shape</a></p>

            <p><a class="navLink" href="#" navlink="/Samples/PaperSample3">Base Line</a></p>
        </div>

        <div title="Base Transform" iconcls="icon-edit" style="padding: 10px;">
        </div>

        <div title="Advance Transform" iconcls="icon-edit" style="padding: 10px">
            content3
        </div>
    </div>

</div>


<div id="mainPanel" data-options="region:'center'" title="Site>Home" style="overflow: hidden;">
    <div id="tt" fit="true" border="false" class="easyui-tabs">
        <div title="Main Work Space" style="padding: 20px; display: none;">
        </div>
    </div>
</div>


<div data-options="region:'south',split:true" title="Raphaeljs Samples" style="height: 60px; background: #efefef;">
    <div class="easyui-layout" data-options="fit:true" style="background: #ccc;">
        <div data-options="region:'center'" style="text-align: center; padding: 10px;">Copy right X-Soft &&2013-2030 </div>
    </div>
</div>
